<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="3.5">
        <div class="sp-commodity">walmart链接</div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-cascader :options="platFormOptions" :show-all-levels="false" @change="handleNodeClick"
            style="margin-top: 8px"></el-cascader>
        </div>
      </el-col>
      <el-col :span="1" v-if="1==2">
        <el-dropdown>
          <el-button type="primary" plain style="margin-top: 8px">管理商品 <i
              class="el-icon-arrow-down el-icon--right"></i></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click="addItems">添加项目</el-dropdown-item>
            <el-dropdown-item @click="updateItems">更新项目</el-dropdown-item>
            <el-dropdown-item @click="fuifillItemsWithWFS">使用WFS履行物品</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <div class="underlying-div">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="`AII(${AIITotal})`" name="aii"></el-tab-pane>
          <el-tab-pane :label="`未发布(${UnpublishedTotal})`" name="unpublished"></el-tab-pane>
          <el-tab-pane :label="`Errors(${ErrorsTotal})`" name="errors"></el-tab-pane>
          <el-tab-pane :label="`Drafts(${DraftsTotal})`" name="drafts"></el-tab-pane>
          <el-tab-pane :label="`已发布(${PublishedTotal})`" name="published"></el-tab-pane>
          <el-tab-pane :label="`正在处理(${ProcessingTotal})`" name="processing"></el-tab-pane>
          <div class="input-container">
            <el-input :placeholder="inputPlaceholder()" v-model="input" class="input-with-selects"
              @keyup.enter.native="itemsQuery">
              <el-select v-model="select" slot="prepend" placeholder="请选择" class="select-input">
                <el-option label="SKU" value="1"></el-option>
                <el-option label="Item Id" value="2"></el-option>
                <el-option label="Item Name" value="3"></el-option>
                <el-option label="GTIN" value="4"></el-option>
                <el-option label="UPC" value="5"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="itemsQuery" v-hasPermi="['walmart:item:list']"></el-button>
            </el-input>
            <div class="div-filters" @click="drawer = true">
              <i class="el-icon-s-operation"></i>
              <span>筛选器</span>
            </div>
            <div class="div-column">
              <i class="el-icon-menu"></i>
              <span>列</span>
            </div>
            <div class="div-view">
              <i class="el-icon-upload"></i>
              <span>Download view</span>
            </div>
          </div>
          <div class="div-items">
            <el-table v-loading="loading" :data="itemsList" @selection-change="handleSelectionChange"
              style="width: 100%" height="572px">
              <el-table-column fixed type="selection" width="55" align="center" />
              <el-table-column label="图片" align="center" prop="imgName" width="100" fixed>
                <template slot-scope="scope">
                  <image-preview v-if="scope.row.imgName" :src="scope.row.imgName" :width="50" :height="50" />
                  <i v-else class="no-image-icon"><image-preview :src="scope.row.imageUrl" :width="50"
                      :height="50" /></i>
                </template>
              </el-table-column>
              <el-table-column fixed label="Item Name" align="center" prop="productName" width="330">
                <template slot-scope="scope">
                  <el-popover placement="top-start" title="Item Name" width="600" trigger="hover"
                    :content="scope.row.productName">
                    <span slot="reference">{{ scope.row.productName.slice(0, 39)
                      }}<span v-if="scope.row.productName.length > 39">...</span></span>
                  </el-popover>
                </template></el-table-column>
              <el-table-column label="sellerSKU" align="center" prop="sku" width="120"></el-table-column>
              <el-table-column label="Price" align="center" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.currency === 'USD'">$</span>
                  <span>{{ scope.row.amount }} </span>
                </template>
              </el-table-column>
              <el-table-column label="Status" align="center" prop="publishedStatus" width="120">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.walmart_items_status" :value="scope.row.publishedStatus" />
                </template>
              </el-table-column>
              <el-table-column label="Lifecycle" align="center" prop="lifecycleStatus" width="120">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.walmart_lifecycle_status" :value="scope.row.lifecycleStatus" />
                </template>
              </el-table-column>
              <el-table-column label="Item ID" align="center" prop="itemId" width="150"></el-table-column>
              <el-table-column label="Product ID" align="center" prop="wpid" width="180"></el-table-column>
              <el-table-column label="GTIN" align="center" prop="gtin" width="180"></el-table-column>
              <el-table-column label="itemLastUpdated" align="center" width="150" sortable>
                <template slot-scope="scope">
                  {{ parseTime(scope.row.itemLastUpdated, "{y}-{m}-{d}") }}
                </template>
              </el-table-column>
              <el-table-column label="UPC" align="center" prop="upc" width="180"></el-table-column>
              <el-table-column label="ISBN" align="center" width="120"></el-table-column>
              <el-table-column label="Est.commission" align="center" width="180"></el-table-column>
              <el-table-column label="Competitive price" align="center" width="180"></el-table-column>
            </el-table>
          </div>
          <div style="margin-top: -11px; height: 50px">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageNum"
              :limit.sync="queryParam.pageSize" @pagination="getItemsList()" />
          </div>
        </el-tabs>
      </div>
    </div>

    <el-drawer title="筛选器" :visible.sync="drawer" :direction="direction" :before-close="handleClose" :size="450">
      <div class="filters-line"></div>
      <div class="collapse-div">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title">
              <div>
                状态
                <br />
                <div v-if="!activeNames || activeNames.length === 0">
                  <el-tag :key="tag" v-for="tag in tags" closable :disable-transitions="false" @close="handleTags(tag)">
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </template>
            <el-radio-group v-model="radioValue">
              <el-radio label="Drafts">Drafts</el-radio><br />
              <el-radio label="Errors">Errors</el-radio><br />
              <el-radio label="Processing">processing</el-radio><br />
              <el-radio label="Published">Published</el-radio><br />
              <el-radio label="Unpublished">Unpublished</el-radio><br />
            </el-radio-group>
          </el-collapse-item>

          <el-collapse-item name="2">
            <template slot="title">
              <div>
                价格
                <br />
                <div v-if="!activeNames || activeNames.length === 0">
                  <el-tag :key="price" v-for="price in prices" closable :disable-transitions="false"
                    @close="handlePrices(price)">
                    {{ price }}
                  </el-tag>
                </div>
              </div>
            </template>
            <div class="container">
              <div class="div1-Price">
                <div class="div1-us">
                  美<br />
                  元
                </div>
                <div>
                  <input type="text" class="input-us" v-model="smallValue" @input="onInputChange" />
                </div>
                <div class="div2-us">无最小值</div>
              </div>
              <div class="div2-Price">
                <div class="div1-us">
                  美<br />
                  元
                </div>
                <div>
                  <input type="text" class="input-us" v-model="largeValue" @input="onInputChange" />
                </div>
                <div class="div2-us">无最大值</div>
              </div>
            </div>
          </el-collapse-item>

          <el-collapse-item name="3">
            <template slot="title">
              <div>
                库存
                <br />
                <div v-if="!activeNames || activeNames.length === 0">
                  <el-tag :key="stock" v-for="stock in stocks" closable :disable-transitions="false"
                    @close="handleStocks(stock)">
                    {{ stock }}
                  </el-tag>
                </div>
              </div>
            </template>
            <el-radio-group v-model="stockValue">
              <el-radio label="Available">Available</el-radio><br />
              <el-radio label="Out of stock">Out of stock</el-radio><br />
              <el-radio label="Out of stock today">Out of stock today</el-radio><br />
              <el-radio label="Out of stock yesterday">Out of stock yesterday</el-radio><br />
              <el-radio label="Out of stock last 2 days">Out of stock last 2 days</el-radio><br />
              <el-radio label="Out of stock last 7 days">Out of stock last 7 days</el-radio><br />
            </el-radio-group>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template slot="title">
              <div>
                变体
                <br />
                <div v-if="!activeNames || activeNames.length === 0">
                  <el-tag :key="variant" v-for="variant in variants" closable :disable-transitions="false"
                    @close="handleVariants(variant)">
                    {{ variant }}
                  </el-tag>
                </div>
              </div>
            </template>
            <el-radio-group v-model="variantValue">
              <el-radio label="variant item">variant item</el-radio><br />
              <el-radio label="Non-variant item">Non-variant item</el-radio><br />
            </el-radio-group>
          </el-collapse-item>
          <el-collapse-item name="5">
            <template slot="title">
              <div>
                物流类型
                <br />
                <div v-if="!activeNames || activeNames.length === 0">
                  <el-tag :key="logistics" v-for="logistics in logisticsList" closable :disable-transitions="false"
                    @close="handleLogistics(logistics)">
                    {{ logistics }}
                  </el-tag>
                </div>
              </div>
            </template>
            <el-checkbox-group v-model="logisticsList">
              <el-checkbox label="Seller fulfilled"></el-checkbox><br />
              <el-checkbox label="Walmart fulfilled (WFS)"></el-checkbox><br />
              <el-checkbox label="Seller fulfilled (WFS Eligible)"></el-checkbox>
            </el-checkbox-group>
          </el-collapse-item>
          <el-collapse-item title="生命周期" name="6">
            <template slot="title">
              <div>
                生命周期
                <br />
                <div v-if="!activeNames || activeNames.length === 0">
                  <el-tag :key="cycle" v-for="cycle in cycleList" closable :disable-transitions="false"
                    @close="handleCycle(cycle)">
                    {{ cycle }}
                  </el-tag>
                </div>
              </div>
            </template>
            <el-checkbox-group v-model="cycleList">
              <el-checkbox label="Active"></el-checkbox><br />
              <el-checkbox label="Retired"></el-checkbox><br />
              <el-checkbox label="Archived"></el-checkbox>
            </el-checkbox-group>
          </el-collapse-item>
          <el-collapse-item name="7">
            <template slot="title">
              <div>
                状态变更原因
                <br />
                <div v-if="!activeNames || activeNames.length === 0">
                  <el-tag :key="cause" v-for="cause in causeList" closable :disable-transitions="false"
                    @close="handleCause(cause)">
                    {{ cause }}
                  </el-tag>
                </div>
              </div>
            </template>
            <el-checkbox-group v-model="causeList">
              <el-checkbox label="Offer 尚未开始"></el-checkbox><br />
              <el-checkbox label="Offer 已结束"></el-checkbox><br />
              <el-checkbox label="商品已停用"></el-checkbox><br />
              <el-checkbox label="商品未授权"></el-checkbox><br />
              <el-checkbox label="违反比价规则"></el-checkbox><br />
              <el-checkbox label="违反有竞争力价格的行为"></el-checkbox><br />
              <el-checkbox label="图片缺失"></el-checkbox><br />
              <el-checkbox label="手动取消发布"></el-checkbox><br />
              <el-checkbox label="违反规定的行为"></el-checkbox><br />
              <el-checkbox label="内部错误"></el-checkbox><br />
              <el-checkbox label="无效账户"></el-checkbox><br />
              <el-checkbox label="无税码"></el-checkbox><br />
              <el-checkbox label="价格缺失"></el-checkbox><br />
              <el-checkbox label="运输信息缺失"></el-checkbox>
            </el-checkbox-group>
          </el-collapse-item>
          <el-collapse-item title="顾客评价" name="8">
            <div>
              用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
            </div>
            <div>
              结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
            </div>
          </el-collapse-item>
          <el-collapse-item title="重新定价策略" name="9">
            <div>
              用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
            </div>
            <div>
              结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Vue from "vue";
import { getList, getItemsSummar } from "@/api/walmart/items";
import { getPlatFormTree } from "@/api/walmart/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  dicts: ["walmart_items_status", "walmart_lifecycle_status"],
  components: { Treeselect },
  data() {
    return {
      activeName: "aii",
      select: "1",
      input: "",
      drawer: false,
      direction: "rtl",

      activeNames: [],

      radioValue: "",
      tags: [],
      stockValue: "",
      stocks: [],
      variantValue: "",
      variants: [],
      prices: [],
      //无最小值
      smallValue: "",
      //无最大值
      largeValue: "",
      logisticsList: [],
      cycleList: [],
      causeList: [],

      // 遮罩层
      loading: true,
      // 非多个禁用
      multiple: true,
      //商品数据
      itemsList: [],
      id: [],
      // 总条数
      total: 0,
      publishedTotal: 0,
      queryParam: {
        pageNum: 1,
        pageSize: 50,
        sku: null,
        productName: null,
        gtin: null,
        upc: null,
        authId: null,
      },
      platFormOptions: [],

      AIITotal: 0,
      UnpublishedTotal: 0,
      ErrorsTotal: 0,
      DraftsTotal: 0,
      PublishedTotal: 0,
      ProcessingTotal: 0,
      itemsSummaryParam: {},
    };
  },
  created() {
    this.getItemsList();
    this.getItemsSummary();
    this.getPlatForm();
  },
  methods: {
    handleClick(tab) {
      this.queryData(tab.name);
    },
    queryData(tabName) {
      // 根据 tabName 执行查询，下面是一个简单的示例
      switch (tabName) {
        case "aii":
          this.queryParam.statusList = ["PUBLISHED", "UNPUBLISHED"];
          this.getItemsList();
          break;
        case "unpublished":
          this.queryParam.statusList = ["UNPUBLISHED"];
          this.getItemsList();
          break;
        case "errors":
          this.queryParam.statusList = ["errors"];
          this.getItemsList();
          break;
        case "drafts":
          this.queryParam.statusList = ["drafts"];
          this.getItemsList();
          break;
        case "published":
          this.queryParam.statusList = ["PUBLISHED"];
          this.getItemsList();
          break;
        case "processing":
          this.queryParam.statusList = ["processing"];
          this.getItemsList();
          break;
        default:
          console.log("无效的 Tab");
      }
    },
    inputPlaceholder() {
      if (this.select === "1") {
        // 当选择的是SKU时
        return "包括SKU的一部分，如AB_CDE中的AB";
      } else if (this.select === "2") {
        // 当选择的是商品 ID时
        return "包括完整的 8-10 位的数字，如917041995";
      } else if (this.select === "3") {
        //当选择的是商品名称时
        return "包括名称开头，如“Men’s Polo”中的“Men’s”";
      } else if (this.select === "4") {
        //当选择的是GTIN时
        return "包括完整的14位数字，如00049000024685";
      } else if (this.select === "5") {
        //当选择的是UPC时
        return "包括完整的12位数字，如887243228114";
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    handleChange(activeNames) {
      if (this.radioValue !== null) {
        this.tags = []; // 清空之前的标签数组
        if (this.radioValue === "Drafts") {
          this.tags.push("Drafts");
        } else if (this.radioValue === "Errors") {
          this.tags.push("Errors");
        } else if (this.radioValue === "Processing") {
          this.tags.push("Processing");
        } else if (this.radioValue === "Published") {
          this.tags.push("Published");
        } else if (this.radioValue === "Unpublished") {
          this.tags.push("Unpublished");
        }
      }
      if (this.stockValue !== null) {
        this.stocks = [];
        if (this.stockValue === "Available") {
          this.stocks.push("Available");
        } else if (this.stockValue === "Out of stock") {
          this.stocks.push("Out of stock");
        } else if (this.stockValue === "Out of stock today") {
          this.stocks.push("Out of stock today");
        } else if (this.stockValue === "Out of stock yesterday") {
          this.stocks.push("Out of stock yesterday");
        } else if (this.stockValue === "Out of stock last 2 days") {
          this.stocks.push("Out of stock last 2 days");
        } else if (this.stockValue === "Out of stock last 7 days") {
          this.stocks.push("Out of stock last 7 days");
        }
      }
      if (this.variantValue !== null) {
        this.variants = [];
        if (this.variantValue === "variant item") {
          this.variants.push("variant item");
        } else if (this.variantValue === "Non-variant item") {
          this.variants.push("Non-variant item");
        }
      }
      if (this.smallValue != "" && this.largeValue == "") {
        this.prices = [];
        this.prices.push("greater than " + this.smallValue);
      } else if (this.largeValue != "" && this.smallValue == "") {
        this.prices = [];
        this.prices.push("less than " + this.largeValue);
      } else if (this.smallValue != "" && this.largeValue != "") {
        this.prices = [];
        this.prices.push(this.smallValue + " to " + this.largeValue);
      } else {
        this.prices = [];
      }
    },
    handleTags(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
      this.radioValue = "";
    },
    handleStocks(stock) {
      this.stocks.splice(this.stocks.indexOf(stock), 1);
      this.stockValue = "";
    },
    handleVariants(variant) {
      this.variants.splice(this.variants.indexOf(variant), 1);
      this.variantValue = "";
    },
    handlePrices(price) {
      this.prices.splice(this.prices.indexOf(price), 1);
      if (price.includes("greater than")) {
        this.smallValue = "";
      } else if (price.includes("less than")) {
        this.largeValue = "";
      } else if (price.includes("to")) {
        this.smallValue = "";
        this.largeValue = "";
      }
    },
    onInputChange() {
      this.smallValue = this.smallValue.replace(/\D/g, ""); // 只保留数字
    },
    handleLogistics(logistics) {
      this.logisticsList.splice(this.logisticsList.indexOf(logistics), 1);
    },
    handleCycle(cycle) {
      this.cycleList.splice(this.cycleList.indexOf(cycle), 1);
    },
    handleCause(cause) {
      this.causeList.splice(this.causeList.indexOf(cause), 1);
    },
    handleSelectionChange(selection) {
      this.id = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },

    /** 条件查询所有商品 */
    getItemsList() {
      this.loading = false;
      getList(this.queryParam).then((response) => {
        this.itemsList = response.rows;
        this.total = response.total;
      });
    },
    /** 汇总链接状态 */
    getItemsSummary() {
      if (!this.itemsSummaryParam.authId) {
        return;
      }
      getItemsSummar(this.itemsSummaryParam).then((response) => {
        this.AIITotal = response.allItems;
        this.UnpublishedTotal = response.unpublished;
        this.ErrorsTotal = response.errors;
        this.DraftsTotal = response.drafts;
        this.PublishedTotal = response.published;
        this.ProcessingTotal = response.processing;
      });
    },

    /** 商品搜索 */
    itemsQuery() {
      if (this.select == "1") {
        this.queryParam.sku = this.input;
        this.getItemsList();
      } else if (this.select == "3") {
        this.queryParam.productName = this.input;
        this.getItemsList();
      } else if (this.select == "4") {
        this.queryParam.gtin = this.input;
        this.getItemsList();
      } else if (this.select == "5") {
        this.queryParam.upc = this.input;
        this.getItemsList();
      }
    },
    /** 查询店铺名称列表 */
    getPlatForm() {
      getPlatFormTree().then((response) => {
        this.platFormOptions = response.data;
      });
    },
    /** 添加项目 */
    addItems() { },
    /** 更新项目 */
    updateItems() { },
    /** 使用WFS履行物品 */
    fuifillItemsWithWFS() { },
    handleNodeClick(data) {
      this.queryParam.authId = data[2];
      this.itemsSummaryParam.authId = data[2];
      this.getItemsList();
      this.getItemsSummary();
    },
  },
};
</script>

<style>
.sp-commodity {
  font-size: 36px;
  font-weight: bold;
}

.dropdown-menu p {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #efefef;
  padding-top: 0px;
}

.dropdown-menu p:hover {
  background-color: #f5f5f5;
}

.underlying-div {
  width: 100%;
  height: 770px;
  border: 1px solid #ececec;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  margin-top: 25px;
}

.underlying-div>div:first-child {
  padding-top: 10px;
}

.el-tabs__nav:first-child {
  padding-left: 20px;
  box-sizing: border-box;
}

.el-tabs__active-bar {
  left: 18px;
}

.select-input {
  width: 130px;
}

.input-with-selects {
  width: 1193px;
}

.input-with-selects .el-input-group__prepend {
  background-color: #fff;
}

.el-input--medium .el-input__inner {
  line-height: 36px;
}

.input-container {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-left: 12px;
}

.div-filters {
  width: 100px;
  height: 36px;
  border: 1px solid #e3e1e1;
  border-radius: 5px;
  margin-left: 10px;
  /* 调整距离，根据需要进行修改 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.div-column {
  width: 100px;
  height: 36px;
  border: 1px solid #e3e1e1;
  border-radius: 5px;
  margin-left: 10px;
  /* 调整距离，根据需要进行修改 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.div-view {
  width: 150px;
  height: 36px;
  border: 1px solid #e3e1e1;
  border-radius: 5px;
  margin-left: 10px;
  /* 调整距离，根据需要进行修改 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.div-filters:hover {
  border-color: rgb(151, 151, 153);
  border-width: 2px;
}

.div-column:hover {
  border-color: rgb(151, 151, 153);
  border-width: 2px;
}

.div-view:hover {
  border-color: rgb(151, 151, 153);
  border-width: 2px;
}

.div-filters i {
  margin-right: 5px;
  /* 调整距离，根据需要进行修改 */
}

.div-filters span {
  font-size: 14px;
  /* 设置字体大小，根据需要进行修改 */
}

.div-column i {
  margin-right: 5px;
  /* 调整距离，根据需要进行修改 */
}

.div-column span {
  font-size: 14px;
  /* 设置字体大小，根据需要进行修改 */
}

.div-view i {
  margin-right: 5px;
  /* 调整距离，根据需要进行修改 */
}

.div-view span {
  font-size: 14px;
  /* 设置字体大小，根据需要进行修改 */
}

.filters-line {
  border-top: 1px solid #e6ebf5;
  position: relative;
  top: 1px;
  /* 可根据需要调整下移的距离 */
}

.el-radio {
  margin-bottom: 10px;
  /* 设置下方间距为 20px，可以根据需要调整 */
  margin-top: 10px;
  /* 设置上方间距为 20px，可以根据需要调整 */
}

.collapse-div {
  margin-left: 20px;
}

.collapse-div .el-collapse-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: auto;
  line-height: 48px;
  background-color: #ffffff;
  color: #303133;
  cursor: pointer;
  border-bottom: 1px solid #e6ebf5;
  font-size: 13px;
  font-weight: 500;
  -webkit-transition: border-bottom-color 0.3s;
  transition: border-bottom-color 0.3s;
  outline: none;
}

.div1-Price {
  width: 198px;
  height: 81px;
  margin-top: 16px;
  border: 1px solid #e3e1e1;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.div2-Price {
  width: 198px;
  height: 81px;
  margin-top: 16px;
  border: 1px solid #e3e1e1;
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin-left: 10px;
  /* 调整距离，根据需要进行修改 */
}

.div1-us {
  font-size: 15px;
  margin-left: 10px;
  color: #74767c;
}

.div2-us {
  margin-left: -156px;
  margin-top: -58px;
  color: #74767c;
}

.input-us {
  width: 161px;
  height: 40px;
  margin-left: 10px;
  border-radius: 5px;
  border: none;
  outline: none;
}

.input-us:focus {
  border: 1px solid #000000;
  /* 设置默认边框颜色 */
  border-color: #000000;
  /* 设置输入框被聚焦时的边框颜色 */
}

.div-items {
  margin-top: 20px;
}
</style>
